<template>
  <div v-if="$route.meta.showNav" class="common-layout">
    <el-container>
      <AsideMenu :isCollapse="isCollapse"></AsideMenu>
      <el-container>
        <el-header class="header" height="48px">
          <div class="top-menu">
            <div class="header_left">
              <div class="top_L">
                <div style="margin-top: 4px" @click="changeCollapes" >
                  <el-icon v-if="!isCollapse" size="20">
                    <Fold />
                  </el-icon>
                  <el-icon v-else size="20">
                    <Expand />
                  </el-icon>
                </div>
                <div class="bread"><Bread></Bread></div>
              </div>
            </div>
            <div class="header_right">
              <I18n></I18n>
              <FullScreen></FullScreen>
              <Avatar></Avatar>
            </div>
          </div>
        </el-header>
        <el-main><router-view :key="cRoute"/></el-main>
      </el-container>
    </el-container>
  </div>
  <div v-else><router-view :key="cRoute"/></div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import Bread from "@/components/bread/index.vue"
import AsideMenu from "@/components/aside/index.vue"
import Avatar from "@/components/avatar/index.vue"
import FullScreen from  "@/components/fullScreen/index.vue"
import I18n from  "@/components/i18n/index.vue"
import { useRouter } from 'vue-router'
const router = useRouter()


let isCollapse = ref(false)
let cRoute:any = computed(() => {
  return router.currentRoute.value.fullPath;
})
function changeCollapes() {
  isCollapse.value = !isCollapse.value
}

</script>
<style scoped>

.header{
  border-bottom: 1px solid #f2f2f2;
  box-shadow: 0 16px 15px -23px rgb(0,0,0,.3);
}
.top-menu{
  width: 100%;
  height: 46px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgb(0,0,0,.0);

}
.bread{
  margin-left: 20px;
}
.top_L{
  display: flex;
  align-items: center;
}
.header_right{
  display: flex;
  align-items: center;
}
</style>